<template>
  <div class="c-popup z-index-popup" mask>
    <div class="popup-body">
      <i class="popup-close" @click="doClose"></i>
      <div class="popup-header"><span>录像下载</span></div>
      <div class="popup-content content-box">
        <!--    列表内容    -->
        <div class="content-table-box">
          <el-table
            ref="videoDownLoadTable"
            class="video-download-table"
            :data="downloadList"
            style="width: 100%"
            @selection-change="selectionChange"
          >
            <el-table-column type="selection" width="60" :show-overflow-tooltip="false"
            ></el-table-column>
            <el-table-column label="通道名称" :show-overflow-tooltip="false">
              <template slot-scope="scope">
                <div class="table-name-div" :c-tip="scope.row.channelName" c-tip-placement="top" c-tip-auto>
                  {{ scope.row.channelName }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="录像时间" width="398" :show-overflow-tooltip="false">
              <template slot-scope="scope">
                <el-date-picker
                  class="c-date-editor y-data-editor-picker"
                  popper-class="c-date-editor-picker pop-index"
                  v-model="scope.row.videoDate"
                  :default-time="['00:00:00','00:00:00']"
                  type="datetimerange"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :clearable="false"
                  :editable="true"
                  @change="changeVideoDate(scope.row)"
                >
                </el-date-picker>
              </template>
            </el-table-column>
            <el-table-column label="状态" align="left" width="80" :show-overflow-tooltip="false">
              <template slot-scope="scope">准备中</template>
            </el-table-column>
            <el-table-column label="操作" align="left" width="84" :show-overflow-tooltip="false">
              <template slot-scope="scope">
                <div class="y-table-btn">
                  <el-button
                    c-tip="新增"
                    c-tip-placement="top"
                    type="text"
                    class="table-btn"
                    icon="iconfont icon-linye_iicon_xunhangjihuafuzhi table-btn-icon"
                    @click="handleAdd(scope.row)"
                  ></el-button>
                  <el-button
                    c-tip="删除"
                    c-tip-placement="top"
                    type="text"
                    class="table-btn"
                    :class="downloadList.length < 2 ? 'disable-table-btn' : ''"
                    icon="iconfont icon-linye_iicon_xunhangshanchu table-btn-icon"
                    @click="handleDelete(scope.row)"
                    :disabled="downloadList.length < 2"
                    style="margin-left: 12px"
                  ></el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!--    底部按钮    -->
        <div class="bottom-btn">
          <i class="c-button btn" submit style="margin-right: 12px" @click="doDownload"><b />下载<b /></i>
          <i class="c-button btn" @click="doClose">取消</i>
        </div>
      </div>
    </div>

  </div>
</template>
<script>

export default {
  name: 'video-download',

  props: {
    /*
    * 录像下载列表数据
    * [{
    *   deviceCode: '10000000001',
    *   channelCode: '1000000001001',
    *   channelName: '铁塔产业园-11号楼',
    *   videoDate: ['2016-05-02 10:00:00','2016-05-02 16:00:00'],
    * }]
    */
    videoDownLoadList: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      //页面下载列表数据
      downloadList: [],
      multipleSelection: []
    };
  },
  created() {
    this.handleListData();
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.videoDownLoadTable.toggleAllSelection()
    })
  },
  methods: {
    /**
     * 关闭属性
     */
    doClose() {
      this.$emit('videoDownloadClose');
    },
    /**
     * 处理前页面的数据
     */
    handleListData() {
      let arr = JSON.parse(JSON.stringify(this.videoDownLoadList));//深度克隆
      for (let item of arr) {//赋值页面展示数据
        item.id = this.getUUID();
        item.rangeDate = item.videoDate;//备份初始数据的时间范围，用于后续时间校验
        this.downloadList.push(item);
      }
    },
    /**
     * 生成uuid
     */
    getUUID() {
      const crypto = window.crypto || window.msCrypto;
      const array = new Uint32Array(1);
      const r = crypto.getRandomValues(array)[0];
      return Date.now() + '2' + r;
    },
    /**
     * 列表选中事件
     */
    selectionChange(val) {
      this.multipleSelection = val;
    },
    /**
     * 删除行事件
     */
    handleDelete(row) {
      this.downloadList = this.downloadList.filter(item => item.id !== row.id);
    },
    /**
     * 添加行事件
     */
    handleAdd(row) {
      const newRow = JSON.parse(JSON.stringify(row));//深度克隆
      newRow.id = this.getUUID();
      this.downloadList.push(newRow);
      console.log('%c █░░░░░░░░░░░░█ ,注释 this.downloadList', 'color: #FAC800', this.downloadList);
    },
    /**
     * 提交下载
     */
    doDownload() {
      if (this.multipleSelection.length === 0) {
        $message.e('请选择下载任务');
        return false;
      }
      let flag = false;
      for (const item of this.multipleSelection) {
        let newMin = new Date(item.videoDate[0]);
        let newMax = new Date(item.videoDate[1]);
        if (newMax - newMin > 30 * 60 * 1000) { // 30 minutes in milliseconds
          flag = true;
          $message.e(`${item.channelName}选择的时间跨度超过30分钟`);
          break
        }
      }
      if(flag){
        return false;
      }

      this.$emit('doDownload', this.multipleSelection);
      this.doClose();
    },

    /**
     * 修改时间范围
     */
    changeVideoDate(row) {
      if (!row.videoDate) {
        this.resetDate(row);
        return false;
      }
      let rangeMin = new Date(row.rangeDate[0]);
      let rangeMax = new Date(row.rangeDate[1]);
      let newMin = new Date(row.videoDate[0]);
      let newMax = new Date(row.videoDate[1]);
      if (newMin < rangeMin) {
        $message.e('开始时间不能早于录像查询最早开始时间');
        this.resetDate(row);
        return false;
      }
      if (newMax < rangeMin) {
        $message.e('开始时间需早于结束时间');
        this.resetDate(row);
        return false;
      }
      if (newMax > rangeMax) {
        $message.e('结束时间不能晚于查询录像的最晚时间');
        this.resetDate(row);
        return false;
      }
      if (newMax - newMin > 30 * 60 * 1000) { // 30 minutes in milliseconds
        $message.e('选择的时间跨度最多为30分钟');
        this.resetDate(row);
        return false;
      }
    },
    /**
     * 还原非法时间
     */
    resetDate(row) {
      for (let item of this.downloadList) {
        if (row.id === item.id) {
          item.videoDate = row.rangeDate;
        }
      }
    }
  }
};
</script>
<style lang="scss">
.pop-index{
  z-index: 20010!important;
}
</style>
<style lang="scss" scoped>
.c-popup.z-index-popup{
  z-index: 20009!important;
}
.popup-body {
  height: auto;
  width: 800px;
}

.content-box {
  padding: 12px;
  /* 表格盒子 */
  .content-table-box {
    width: 100%;
    overflow: hidden;

    /deep/ .el-table {
      background: transparent;
      font-size: 14px;

      &:before {
        background: transparent;
      }

      /*表格头部*/
      .el-table__header-wrapper {
        .el-table__header {
          width: 100% !important;

          .has-gutter {
            .is-leaf {
              background: rgba(79, 159, 255, 0.2);
              color: #E8F3FE;
              border-bottom: 1px solid rgba(232,243,254,0.2);
              padding: 0;

              .cell {
                height: 32px;
                line-height: 32px;
                font-size: 14px;
                color: #E8F3FE;
              }
            }
          }
        }
      }

      /*表格内容*/
      .el-table__body-wrapper {
        height: 285px;
        overflow-y: auto;
        overflow-x: hidden;
        /*有数据*/
        .el-table__body {
          width: 100% !important;

          .el-table__row {
            height: 32px;
            line-height: 32px;

            td {
              border-bottom: 1px solid rgba(232,243,254,0.2);
            }
            .el-table__cell{
              padding: 12px 0px;
            }
          }

          .current-row {
            td {
              background: transparent;

              div {
                font-size: 14px;
                font-weight: normal;
                color: #E8F3FE !important;
              }
            }
          }
        }
      }
    }

    /deep/ .el-table--enable-row-hover .el-table__body tr:hover > td {
      background: transparent;
    }

    /deep/ .el-table th.el-table__cell.is-leaf {
      background: transparent;
      color: #E8F3FE !important;
    }

    /deep/ .el-table th.el-table__cell > .cell {
      color: #E8F3FE !important;
    }

    /deep/ .el-table tr {
      background: transparent !important;
    }

    /deep/ .el-table .cell {
      padding: 0 12px;
      color: #E8F3FE !important;
    }
  }

  .table-name-div {
    width: 100%;
    //padding-right: 10px;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /*日期控件图标替换，间距调整*/
  /deep/ .y-data-editor-picker {
    //width: calc(100% - 30px) !important;
    width: 100% !important;
    padding: 0 8px !important;

    .el-range__icon {
      margin-left: -5px !important;

      &:before {
        content: '\e974';
        font-family: 'iconfont';
      }
    }

    .el-range__close-icon {
      display: none !important;
    }
  }

  /*列表按钮*/
  .y-table-btn {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;

    .table-btn {
      color: #E8F3FE;

      /deep/ .table-btn-icon {
        font-size: 24px;
      }
    }

    .disable-table-btn {
      opacity: 0.4;
    }
  }

  //底部按钮
  .bottom-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 12px;

    .btn {
      width: 108px;
      height: 32px;
    }
  }
}
.content-box {
  .content-table-box {
     /deep/ .el-checkbox {
       color: #E8F2FE;
       font-size: 14px;
       .el-checkbox__input.is-checked + .el-checkbox__label {
         color: #E8F2FE;
       }
       .el-checkbox__inner {
         border-color: #1373E6;
         background: none;
         border-radius: 3px!important;
         width: 16px;
         height: 16px;
         &::after{
           border: 2px solid #fff;
           height: 7px;
           left: 5px;
           top: 2px;
           width: 3px;
           box-sizing: content-box;
           content: "";
           border-left: 0;
           border-top: 0;
           position: absolute;
           transition: transform .15s ease-in .05s;
           transform-origin: center;
         }
       }
       .is-checked .el-checkbox__inner {
         border-color: #1373E6;
         background: #1373E6;
       }
       .el-checkbox__input.is-indeterminate .el-checkbox__inner{
         background: #1373E6;
         border-color: #1373E6;
         &::before{
           height: 4px;
         }
       }
     }
  }
}

.l2,.ar-l2 {
  .content-box{
    .content-table-box{
      /deep/ .el-table .el-table__header-wrapper .el-table__header .has-gutter .is-leaf {
        background: rgba(2, 137, 109, 0.2) !important;
        .el-checkbox .el-checkbox__input .el-checkbox__inner {
          box-shadow: inset 0px 0px 3px 0px rgba(2,137,109,0.6);
          background: rgba(2, 137, 109, 0.2) !important;
          border: 0px;
        }
      }
      /deep/ .pagination-box[data-v-2060424e] .el-pagination .el-pager li.active {
        background: rgba(2, 137, 109, 1) !important;
      }
      /deep/ .el-table .el-table__body-wrapper .el-table__body .el-table__row .el-table__cell .cell .el-checkbox .el-checkbox__input .el-checkbox__inner{
        box-shadow: inset 0px 0px 3px 0px rgba(2,137,109,0.6);
        background: rgba(2, 137, 109, 0.2) !important;
        border: 0px;
      }

      /deep/ .el-table .el-table__body-wrapper .el-table__empty-block .el-table__empty-text {
        color: rgba(255, 255, 255, 0.7) !important;

        &:before {
          content: url("~@/assets/image/noData-ly.png") !important;
          background: none !important;
          display: block !important;
          margin-top: -20px !important;
        }
      }

      /deep/ .el-table .cell,
      /deep/ .pagination-box .page-number,
      .pagination-box /deep/ .el-pagination .el-pager li,
      .pagination-box /deep/ .el-pagination .btn-next,
      .pagination-box /deep/ .el-pagination .btn-prev {
        color: #FFFFFF !important;
      }

      /deep/ .el-table th.el-table__cell > .cell {
        color: #FFFFFF !important;
      }

      /deep/ .el-checkbox  .is-checked .el-checkbox__inner,
      /deep/ .el-checkbox .el-checkbox__input.is-indeterminate .el-checkbox__inner{
        background: rgba(2,137,109,0.7)!important;
        border-color: rgba(2,137,109,0.7)!important;
        box-shadow: inset 0 0 4px 0 #02896D!important;
        color:  #FFFFFF;
      }

    }
  }
}

.g,.ar-g {
  .content-box {
    .content-table-box {
      /deep/ .el-table .el-table__header-wrapper .el-table__header .has-gutter .is-leaf {
        background: rgba(122, 113, 61, 0.36) !important;
        .el-checkbox .el-checkbox__input .el-checkbox__inner {
          border-color: #9F9853 !important;
        }
      }
      /deep/ .el-table .el-table__body-wrapper .el-table__body .el-table__row .el-table__cell .cell .el-checkbox .el-checkbox__input .el-checkbox__inner{
        border-color: #9F9853 !important;
      }

      /deep/ .pagination-box[data-v-2060424e] .el-pagination .el-pager li.active {
        background: rgba(159, 152, 83, 1) !important;
      }

      /deep/ .el-table .el-table__body-wrapper .el-table__empty-block .el-table__empty-text {
        color: #E4E7C1 !important;

        &:before {
          content: url("~@/assets/image/noData-gt.png") !important;
          background: none !important;
          display: block !important;
          margin-top: -20px !important;
        }
      }

      /deep/ .el-table .cell,
      /deep/ .pagination-box .page-number,
      .pagination-box /deep/ .el-pagination .el-pager li,
      .pagination-box /deep/ .el-pagination .btn-next,
      .pagination-box /deep/ .el-pagination .btn-prev {
        color: #E4E7C1 !important;
      }

      /deep/ .el-table th.el-table__cell > .cell {
        color: #FFEEB1 !important;
      }

      /deep/ .el-checkbox  .is-checked .el-checkbox__inner,
      /deep/ .el-checkbox .el-checkbox__input.is-indeterminate .el-checkbox__inner{
        background: #9F9853!important;
        border-color: #9F9853!important;
        color:  #FFFFFF;
      }
    }
  }

  .y-table-btn .table-btn{
    color: #FFEEB1;
  }
}
</style>
